<template>
  <ele-modal
    :width="750"
    :visible="visible"
    :confirm-loading="loading"
    :title="'新建'"
    :body-style="{ paddingBottom: '8px' }"
    @update:visible="updateVisible"
    @ok="save"
  >
    <a-form
      :label-col="{ md: { span: 7 }, sm: { span: 4 }, xs: { span: 24 } }"
      :wrapper-col="{ md: { span: 17 }, sm: { span: 20 }, xs: { span: 24 } }"
    >
      <a-row :gutter="24">
        <a-col :md="23" :sm="23" :xs="23">
          <a-form-item label="点数方式" v-bind="validateInfos.type">
            <!-- <a-select
							optionFilterProp="label"
							:options="options"
							allow-clear
							mode="multiple"
							:maxTagCount="2"
							v-model:value="type"
							placeholder="请选择"
							@change="optionsChange"
							autocomplete="off"
						/> -->
            <a-select
              mode="multiple"
				:showArrow="true"
				placeholder="请选择"
              v-model:value="type"
              @change="optionsChange"
            >
              <a-select-option
                :value="item.value"
                v-for="(item, index) in options"
                :disabled="
                  type.length > 2 &&
                  type.findIndex((o) => o === item.value) === -1
                "
                >{{ item.label }}</a-select-option
              >
            </a-select>
          </a-form-item>
          <a-form-item label="点数位置" v-bind="validateInfos.type_code">
            <a-radio-group v-model:value="radioValue" @change="radioGroup">
              <a-radio value="1">全部位置</a-radio>
              <a-radio value="2">指定位置</a-radio>
            </a-radio-group>
          </a-form-item>
          <a-form-item label=" " :colon="false" v-if="radioValue == 2">
            <a-select
              optionFilterProp="label"
              :options="options2"
              allow-clear
              mode="multiple"
              v-model:value="type_code"
              placeholder="请选择"
              @change="optionsChange2"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="负责人" v-bind="validateInfos.charge_user_id">
            <a-select
              optionFilterProp="label"
              :options="options3"
              allow-clear
              v-model:value="form.charge_user_id"
              placeholder="请选择"
              @change="optionsChange3"
              autocomplete="off"
            />
          </a-form-item>
          <a-form-item label="备注">
            <a-textarea
              allow-clear
              placeholder="请输入"
              v-model:value="form.note"
              autocomplete="off"
            />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </ele-modal>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import { Form, message } from 'ant-design-vue';
  import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
  import { get_warehouse_list } from '@/api/jewelry/receipts_purchase';
  import {
    get_user_list,
    tenant_check_add
  } from '@/api/warehouse/tenant_check';
  import { get_warehouse_select, get_user_select } from '@/api/material/select';

  // 表格列配置
  const useForm = Form.useForm;

  const props = defineProps({
    // 弹窗是否打开
    visible: Boolean
  });

  const emit = defineEmits(['done', 'update:visible']);

  // 提交状态
  const loading = ref(false);
  const radioValue = ref('1');
  const type = ref([]);
  const type_code = ref([]);
  const options = ref([
    { label: '品类', value: '1' },
    { label: '类别', value: '2' },
    { label: '大类', value: '4' },
    { label: '小类', value: '8' }
  ]);
  const options2 = ref([]);
  const options3 = ref([]);
  const form = reactive({
    type: '',
    type_code: '',
    charge_user_id: null,
    note: ''
  });

  onMounted(() => {
    get_user_select({ page: 1, page_size: 9999 })
      .then((res) => {
        options3.value = res;
      })
      .catch((e) => {
        message.error(e);
      });
  });

  const radioGroup = (e) => {
    radioValue.value = e.target.value;
    if (radioValue.value == 1) {
      form.type_code = '';
    } else {
      getWarehouse();
    }
  };
  const getWarehouse = () => {
    get_warehouse_select({ page: 1, page_size: 9999 })
      .then((res) => {
        options2.value = res;
      })
      .catch((e) => {
        message.error(e);
      });
  };
  const optionsChange = (e) => {
    console.log(e);
    type.value = e;
    let num = 0;
    e.forEach((item) => {
      num += Number(item);
    });
    form.type = num;
  };
  const optionsChange2 = (e) => {
    type_code.value = e;
    form.type_code = e.toString();
  };
  const optionsChange3 = (e) => {
    form.charge_user_id = e;
  };
  // 表单验证规则
  const rules = reactive({
    /* type: [
		{
			required: true,
			message: '请选择点数方式',
			type: 'string',
			trigger: 'change'
		}
	],
	type_code: [
		{
			required: true,
			message: '请选择点数位置',
			type: 'string',
			trigger: 'blur'
		}
	], 
    charge_user_id: [
      {
        required: true,
        message: '请选择负责人',
        type: 'string',
        trigger: 'change'
      }
    ]*/
  });

  const { validate, validateInfos } = useForm(form, rules);
  /* 保存 */
  const save = () => {
    validate()
      .then(() => {
        tenant_check_add(form)
          .then((res) => {
            message.success(res.msg);
            emit('done', res.data.id);
          })
          .catch((e) => {
            message.error(e);
          });
      })
      .catch(() => {});
  };
  /* 更新visible */
  const updateVisible = (value) => {
    emit('update:visible', value);
  };
</script>
<style scoped></style>
